<template>
  <view style="padding-bottom:180rpx">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <view class="notes">
      <view class="notes-top">
        <view class="notes-top-t">
          <u-avatar :src="userHeader" size="60"></u-avatar>
        </view>
        <view class="notes-top-b">
          <text>2021-06-30 10:23:14</text>
        </view>
      </view>
      <view class="notes-content">
        <view class="row u-flex">
          <view class="nominal">
            姓名
          </view>
          <view class="input" @tap.stop='notes'>
            <input placeholder="请输入姓名" type="text" v-model="info.remarkName" style="width:100%" />
          </view>
        </view>
        <view class="row u-flex">
          <view class="nominal">
            手机号
          </view>
          <view class="input switch">
            <input placeholder="请输入手机号" type="text" v-model="info.mobile" style="width:100%" />
          </view>
        </view>
        <view class="row u-flex">
          <view class="nominal">
            地址
          </view>
          <view class="input switch">
            <input placeholder="请输入地址" type="text" v-model="info.address" style="width:100%" />
          </view>
        </view>
        <view class="row u-flex">
          <view class="nominal">
            公司
          </view>
          <view class="input switch">
            <input placeholder="请输入公司" type="text" v-model="info.company" style="width:100%" />
          </view>
        </view>
        <view class="row u-flex">
          <view class="nominal">
            爱好
          </view>
          <view class="input switch">
            <input placeholder="请输入爱好" type="text" v-model="info.hobby" style="width:100%" />
          </view>
        </view>
        <view class="row u-flex">
          <view class="nominal">
            关注点
          </view>
          <view class="input switch">
            <input placeholder="请输入关注点" type="text" v-model="info.focus" style="width:100%" />
          </view>
        </view>
        <view class="newrow">
          <view class="nominal">
            备注
          </view>
          <view class="nominalarea">
            <textarea placeholder="请输入备注" v-model="info.remark" cols="30" rows="30"></textarea>
          </view>
        </view>
      </view>

    </view>
    <view class="notes-button">
      <u-button type="primary" shape="circle" @click.stop='save' :loading="btnloading">保存</u-button>
    </view>
  </view>
</template>

<script>
  import {
    editFans,
    fansDetail
  } from '@/config/api2.js'
  export default {
    data() {
      return {
        userJoinTime: '',
        userHeader: '',
		btnloading:false,
        info: {
          remarkName: '',
          address: '',
          mobile: '',
          company: '',
          hobby: '',
          focus: '',
          isTop: '',
          remark: '',
          userId: '',
          fansId: ''
        }
      }
    },
    onLoad(e) {
      this.info.userId = e.userId
      this.getFansDetail()
    },
    methods: {
      getFansDetail() {
        fansDetail({
          userId: this.info.userId
        }).then(res => {
          this.userJoinTime = res.userJoinTime
          this.userHeader = res.userHeader
          this.info.remarkName = res.remark_name ? res.remark_name : ''
          this.info.address = res.address ? res.address : ''
          this.info.mobile = res.mobile ? res.mobile : ''
          this.info.company = res.company ? res.company : ''
          this.info.hobby = res.hobby ? res.hobby : ''
          this.info.focus = res.focus ? res.focus : ''
          this.info.remark = res.remark ? res.remark : ''
		  this.info.fansId = res.fans_id ? res.fans_id : ''
		  this.info.isTop = res.is_top ? res.is_top : ''
        })
      },
      save() {
        const data = JSON.parse(JSON.stringify(this.info))
		this.btnloading = true;
        editFans(data).then(res => {
		  this.btnloading = false;
		  uni.showToast({
		    title: '提交成功',
		    duration: 1000,
		    icon: 'none'
		  })
          uni.navigateBack()
        }).catch(()=>{
			this.btnloading = false;
		})
      }
    }
  }
</script>

<style lang="scss">
  @import '@/style/wmj.scss';
  .notes-button{
	  position: fixed;
	  bottom:0;
	  width:100%;
	  padding:32rpx;
	  background: #fff;
	  z-index: 5;
  }

  .notes-content {
    background-color: #fff;
    border-radius: 55rpx 55rpx 0 0;
    padding: 40rpx 0;
	margin-top:-100rpx;
    .row {
      width: 100%;
      padding: 0 40rpx;
      border-bottom: 1rpx solid #DEDEDE;

      .nominal {
        width: 30%;
        height: 97rpx;
        line-height: 97rpx;
        font-size: 26rpx;
        align-items: center;
      }

      .input {
        width: 100%;
        padding: 20upx 0;
        align-items: center;
        font-size: 26rpx;
        text-align: right;

        &.switch {
          justify-content: flex-end;
        }

        .textarea {
          margin: 20upx 0;
          min-height: 120upx;
        }
      }

    }

    .newrow {
      width: 100%;
      padding: 0 40rpx;

      .nominal {
        width: 30%;
        height: 97rpx;
        line-height: 97rpx;
        font-size: 26rpx;
        align-items: center;
      }

      .nominalarea {
        padding: 23rpx;
        border: 1rpx solid #B8B8B8;
        border-radius: 19rpx;
      }
    }
  }
</style>